<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM-->
<div id="app13" v-if="seen">
    <!--指令能够接收一个参数,在指令名称以后用冒号表示-->
    <a v-bind:href="url">指令参数:Bing</a>
    <a v-on:click="submit">指令参数:click here...</a>
    <!--动态参数:避免使用大写字母,浏览器会把 attribute 名全部强制转为小写-->
    <a v-bind:[attribute]="url">动态参数:Bing</a>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app13',
        data: {
            message: 'Hello Vue!',
            seen: true,
            url: 'https://cn.bing.com/',
            attribute: '',
        },
        methods: {
            submit() {
                alert('keep going!')
            }
        }
    })

    app.url = 'https://www.baidu.com/'
    app.attribute = 'href'
</script>
</body>
</html>